<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0" />
    <title>Test: Responsive with ViewPort Tag</title>   
</head>
<body>
    <h2>Viewport Detections</h2>    
    <h5>&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0&quot; /&gt;</h5>
    <h3><a href="viewport.html">Without ViewPort Tag</a></h3>    

    <div id="result"></div>
    
    <ul>
        <li>1) Prefered: Inner browser surface/viewport. Excludes toolbars & scrollbars.</li>
        <li>2) Fallback: Like 1, but not supported everywhere.</li>
        <li>3) Experimental: Just testing accuracy here.</li>
        <li>4) Prefered: Current browser size. Also takes into account a resized browser window.</li>
        <li>5) Fallback: Measures the entire screen resolution.</li>
        <li><a href="http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICAiYLaCAw?v=3&layout=simple" target="results">BrowserScope Results</a></li>
    </ul> 
    
          
   
    <script>
        // Throttle navigators from triggering too many resize events
        var resizeId = 0;
        function onResize() {
            clearTimeout(resizeId);
            resizeId = setTimeout(resize, 50);
        }

        function addResult(title, value) {
            var ele = document.createElement("div");

            if (value !== false) {
                ele.innerHTML = title + ": " + value;

                if (value === "false") {
                    value = 0;
                }
                else if (value === "true") {
                    value = 1;
                }

                browserScopeAdd(title, value);
            } else {
                ele.innerHTML = title;
            }

            return ele;
        }

        // Log results to BrowserScope        
        function browserScopeClear() {
            window._bTestResults = {};
        }

        function browserScopeAdd(title, value) {
            window._bTestResults        = window._bTestResults || {};
            window._bTestResults[title] = value;
        }

        function browserScopeLog() {
            var result = document.getElementById("browserscope");
            if (result) {
                result.parentNode.removeChild(result);
            }

            var apiKey = 'agt1YS1wcm9maWxlcnIRCxIEVGVzdBiAgICAiYLaCAw';
            var script = document.createElement('script');

            script.id = "browserscope";
            script.src = 'http://www.browserscope.org/user/beacon/' + apiKey;

            // use insertBefore to keep IE from throwing Operation Aborted (thx Bryan Forbes!)
            var head = document.head || document.getElementsByTagName('head')[0];
            // but insert at end of head, because otherwise if it is a stylesheet, it will not override values
            head.insertBefore(script, head.lastChild);
        }

        // Detect
        function resize() {
            browserScopeClear();

            var result = document.getElementById("result");
            var parent = result.parentNode;
            parent.removeChild(result);

            var newResult = document.createElement("div");
            newResult.id  = "result";

            newResult.appendChild(addResult("1) INNER measurements", false));

            newResult.appendChild(addResult("innerWidth" , window.innerWidth));
            newResult.appendChild(addResult("innerHeight", window.innerHeight));
            newResult.appendChild(addResult("landscape (iwh)", (window.innerWidth > window.innerHeight).toString()));

            newResult.appendChild(addResult("<br/>", false));
            newResult.appendChild(addResult("2) INNER measurements", false));

            newResult.appendChild(addResult("clientWidth" , document.documentElement.clientWidth));
            newResult.appendChild(addResult("clientHeight", document.documentElement.clientHeight));
            newResult.appendChild(addResult("landscape (cwh)", (document.documentElement.clientWidth > document.documentElement.clientHeight).toString()));

            newResult.appendChild(addResult("<br/>", false));
            newResult.appendChild(addResult("3) INNER measurements", false));

            newResult.appendChild(addResult("availWidth", window.screen.availWidth));
            newResult.appendChild(addResult("availHeight", window.screen.availHeight));
            newResult.appendChild(addResult("landscape (awh)", (window.screen.availWidth > window.screen.availHeight).toString()));

            newResult.appendChild(addResult("<br/>", false));
            newResult.appendChild(addResult("4) OUTER measurements", false));

            newResult.appendChild(addResult("outerWidth" , window.outerWidth));
            newResult.appendChild(addResult("outerHeight", window.outerHeight));
            newResult.appendChild(addResult("landscape (owh)", (window.outerWidth > window.outerHeight).toString()));

            newResult.appendChild(addResult("<br/>", false));
            newResult.appendChild(addResult("5) OUTER measurements", false));

            newResult.appendChild(addResult("screen.width" , window.screen.width));
            newResult.appendChild(addResult("screen.height", window.screen.height));
            newResult.appendChild(addResult("landscape (swh)", (window.screen.width > window.screen.height).toString()));

            parent.appendChild(newResult);
            browserScopeLog();
        }

        resize();

        // Manually attach, as to not overwrite existing handler
        if (window.addEventListener) {
            window.addEventListener("resize", onResize, false);

        } else {
            window.attachEvent("onresize", onResize);
        }
    </script>
</body>
</html>